<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
	<link rel="shortcut icon" href="images/metabologo.png" type="image/x-icon" />
	<META http-equiv="content-type" content="text/html; charset=utf-8">
	<TITLE>MetaboBase</TITLE>
	<style type="text/css" title="currentStyle">
                        @import "lib/css/demo_page.css";
                        @import "lib/css/demo_table.css";
        </style>
	<LINK rel="stylesheet" type="text/css" href="lib/css/jquery.ui.all.css">
	<LINK rel="stylesheet" type="text/css" href="lib/css/layout-default-latest.css">
        <LINK rel="stylesheet" type="text/css" href="css/style.css">
	<STYLE type="text/css">
	html, body {
		width:		99%;
		height:		99%;
		padding:	0;
		margin:		0;
		/*overflow:	hidden !important;*/
	}
	.cheight {
		height:30px;
                border: 1px solid blue;
	}
	span.mheadlinks 
	{
   	margin: 5 auto;
	float: right;
	font-size: 11px;
	color: white;
	}
	#optional-container {
		width:			99%;
		height:			99%;
		margin-top:		1%;
		margin-right:	0%;
		margin-left:   0%;
		margin-bottom: 1%;
		overflow: scroll !important;
	}
	.ui-layout-pane-north,
	.ui-layout-pane-south{
    		/*overflow: hidden;*/
	}
	td.details_exp {
        background-color: #E8E8E8;
        border: 1px solid red;
	}
	/*.ui-layout-center { overflow: scroll; 
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  -o-border-radius:2px;
  -ms-border-radius:2px;
  border-radius:2px;
	}*/
	</STYLE>
	<SCRIPT type="text/javascript" src="lib/js/jquery.js"></SCRIPT>
	<SCRIPT type="text/javascript" src="lib/js/jquery-ui-latest.js"></SCRIPT>
	<SCRIPT type="text/javascript" src="lib/js/jquery.layout-latest.js"></SCRIPT>
	<link rel="stylesheet" type="text/css" href="lib/js/bootstrap.css" media="all">
        <script type="text/javascript" src="lib/js/bootstrap.js"></script>
      <!--  <script type="text/javascript" src="lib/js/typeahead.js"></script> -->
	<script type="text/javascript" src="lib/js/jquery.dataTables.js"></script>
	<script type="text/javascript" src="lib/js/highcharts.js"></script>
        <script type="text/javascript" src="lib/js/exporting.js"></script>
	<link rel="stylesheet" href="lib/js/messi.min.css" />
	<script src="lib/js/messi.js"></script>
	<script type='text/javascript' src="atom_transition/lib/underscore-min.js"></script>
        <script type='text/javascript' src="atom_transition/lib/cytoscape.js"></script>
        <script type='text/javascript' src="atom_transition/lib/arbor.js"></script>
        <script type='text/javascript' src="atom_transition/lib/node111784_ab_crc.js"></script>
	<script type="text/javascript" src="js/library_compounds.js"></script>
	<script type="text/javascript" src="js/spectrum.js"></script>
	<script type="text/javascript" src="js/spectrum_annotation.js"></script>
	<script type="text/javascript" src="js/compound_precursor_product.js"></script>
	<script type="text/javascript" src="js/custom_plot.js"></script>
	<script type="text/javascript" src="js/elements.js"></script>
	<script type="text/javascript" src="js/experiment_groups.js"></script>
	<script type="text/javascript" src="atom_transition/js/atom_events.js"></script>
	<script type="text/javascript" src="atom_transition/js/graph_plot.js"></script>
	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="js/search_chromatogram.js"></script>
	<SCRIPT type="text/javascript">
	var myLayout;
	var oTable;
        var chromatogramTable;
        var spectrumTable;
	var compoundTable;
        var compoundSpectrumTable;
	var spectrumAnnotationTable;
	var compoundPrecursorTable;
	var reagent_dictionary;
        var ri_val;
	var precursorTypeAhead = null;
	var csearchTypeAhead = null;
	var datafileTypeAhead = null;
	var detailsopen = false;
/*	function setupDetails(oTable){
	    var nCloneTh = document.createElement( 'th' );
    	    var nCloneTd = document.createElement( 'td' );
    	    nCloneTd.innerHTML = '<img src="images/details_open.png">';
    	    nCloneTd.className = "center";

  /*  $('#exp_metabo_tbl thead tr').each( function () {
        this.insertBefore( nCloneTh, this.childNodes[0] );
    } );

    $('#exp_metabo_tbl tbody tr').each( function () {
        this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
    } );

    /* Add event listener for opening and closing details
     * Note that the indicator for showing which row is open is not controlled by DataTables,
     * rather it is done here
     */
   /* $('#exp_metabo_tbl tbody td img').on('click', function () {
        var nTr = $(this).parents('tr')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
            this.src = "images/details_open.png";
            oTable.fnClose( nTr );
        }
        else
        {
            this.src = "images/details_close.png";
            oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details_exp' );
        }
    });
*/
/*
   $('exp_metabo_tbl tbody td img').on('page', function() {
        $('#exp_metabo_tbl tbody td img').on('click', function () {
	var nTr = $(this).parents('tr')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
            this.src = "images/details_open.png";
            oTable.fnClose( nTr );
        }
        else
        {
            this.src = "images/details_close.png";
            oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details_exp' );
        }
    });
   });
}
*/
	$(document).ready(function(){
		var jqtabs = $("#tabs_div").tabs();
		//useful command $( "#tabs_div" ).tabs( "option", "active", 2 );
		var tempV = [''];
		$(".header-footer").hover(
			function(){ $(this).addClass('ui-state-hover'); },
			function(){ $(this).removeClass('ui-state-hover'); }
		);
		//myLayout = $('#optional-container').layout({west__initClosed: true,east__initClosed:true, south__initClosed: true});
		myLayout = $('#optional-container').layout({
		//	reference only - these options are NOT required because 'true' is the default
			closable:					true	// pane can open & close
		,	resizable:					true	// when open, pane can be resized 
		,	slidable:					true	// when closed, pane can 'slide' open over other panes - closes on mouse-out
		,	livePaneResizing:			true
		//	some resizing/toggling settings
		,	north__slidable:			false	// OVERRIDE the pane-default of 'slidable=true'
		,	north__togglerLength_closed: '100%'	// toggle-button is full-width of resizer-bar
		,	north__spacing_closed:		20		// big resizer-bar when open (zero height)
		,	south__resizable:			false	// OVERRIDE the pane-default of 'resizable=true'
		,	south__spacing_open:		0		// no resizer-bar when open (zero height)
		,	south__spacing_closed:		20		// big resizer-bar when open (zero height)
		//	some pane-size settings
		,	west__minSize:				100
		,	east__size:					300
		,	east__minSize:				200
		,	east__maxSize:				.5 // 50% of layout width
		,	center__minWidth:			100
		//	some pane animation settings
		,	west__animatePaneSizing:	false
		,	west__fxSpeed_size:			"fast"	// 'fast' animation when resizing west-pane
		,	west__fxSpeed_open:			1000	// 1-second animation when opening west-pane
		,	west__fxSettings_open:		{ easing: "easeOutBounce" } // 'bounce' effect when opening
		,	west__fxName_close:			"none"	// NO animation when closing west-pane
		//	enable showOverflow on west-pane so CSS popups will overlap north pane
		,	west__showOverflowOnHover:	true
		//	enable state management
		//,	stateManagement__enabled:	true // automatic cookie load & save enabled by default
		,	showDebugMessages:			true // log and/or display messages from debugging & testing code
		,west__initClosed: true,east__initClosed:true, south__initClosed: true
		});
		myLayout.sizePane("west", 500);
		myLayout.sizePane("east", 500);
		myLayout.sizePane("north", 60);
		$("#search_input").css("display","inline");
		$( "#exp_date" ).datepicker({ dateFormat: "dd/mm/yy" });
	        $.ajax({
                                type: "POST",
                                url:  "/cgi-bin/metabobase/get_config.cgi",
                                data: {
                                        'search_input': 'none',
                                },
                                success: function(json)
                                {
                                        //$("#experiment_form_message").html("Add new experiment or click details to update existing");
                                        $("#home_search_chromatogram_results").html("");
                                        $("#hscmsg").html("");
                                        var jo  = $.parseJSON(json);
					mconfig = jo.config;	
					init_compound_library();
					precursorTypeAhead = $('#compound_precursor').typeahead({source: tempV, items:mconfig["product_precursor_typeahead_count"],
                                                onselect: function(sobj) {
                                                                var selected_precursor = sobj;
                                                                $("#derivation_groups").css("display","inline");
                                                                $("#compound_precursor").val(selected_precursor);
                                                                }});
			                csearchTypeAhead = $('#search_input').typeahead({source: tempV, items:mconfig["compound_typeahead_count"]});
                			datafileTypeAhead = $('#chromatogram_id').typeahead({source: tempV, items:mconfig["spectrum_chromatogram_typeahead_limit"]});
                			$("#search_input").change(process_search);
                			$("#compound_precursor").change(process_compound_precursor);
              				$("#compound_synonym").change(update_synflag);
                			$("#chromatogram_id").change(identify_df_key);

				},
				error: function(){
					alert("Server error");
				}
		});
		$( "#tabs_div" ).bind( "tabsselect", function(){
			myLayout.close('east');
		        myLayout.close('west');
			if (arguments != null && arguments[1].index == 1){
				$.ajax({
                                type: "POST",
                                url:  "/cgi-bin/metabobase/get_experiments.cgi",
				data: {
                                        'search_input': 'none',
                                },
                                success: function(json)
                                {
					//addExperiment();
					//$("#experiment_form_message").html("Add new experiment or click details to update existing");
					$("#home_search_chromatogram_results").html("");
					$("#hscmsg").html("");
					var jo  = $.parseJSON(json);
					organism_dictionary = jo.organismData;
					biosample_dictionary = jo.biosampleData;
					active_user = jo.user;
                                        oTable = $('#exp_metabo_tbl').dataTable( {
                                        "bProcessing": true,
					"bDestroy": true,
					"oLanguage": {
                                        	"sSearch": "Filter:"
                                        },
                                        "aaData": jo.aaData,
					"iDisplayLength": mconfig['experiments_page_limit'],
					//"aoColumnDefs": [
                        		//{ "bVisible": false, "aTargets": [ 8 ] }], 
                                        fnDrawCallback: function() {
						//close all open rows before redrawing
						//should really only register once on draw
						/*if (oTable != null){
						    oTable.find('tr').each(function() {
						    var tr_element = jQuery(this);
						    tr_element.unbind('click.datatable_onTableRedraw');
						    });
						}*/
						dblclickExperiment();
					        //detailsopen = false;
						//openids = {};
						//setupExperimentDetails();
						}
						});
					/*oTable.one( 'draw', function () {
					        setupExperimentDetails();
						} );
					setupExperimentDetails();*/
                                },
                                error:function(xhr,err)
                                {
                                        alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
                                }
				})
				
			}else{
				$("#exp_grps_form").hide();
			}
			if (arguments != null && arguments[1].index == 2){
				load_ppc(function(){
					//loop thru dictionary and set all precursor fields to typeahead ...
					var max = 25;
					for (var i = 0; i < max; i++){
						if (orphan_products[i] != null){
                		                var orphan_cid = orphan_products[i]["id"];
						$('#' + orphan_cid + '_precid').typeahead(
							{source: precursorTypeAhead.data('typeahead').source, 
							updater: function(sobj) { 
                                        			var selected_precursor = sobj;
                                        			var selected_product = this.$element[0].id.split("_")[0];
								//$('#' + selected_product + '_precid').val(selected_precursor);
                                        			associate_ppc(selected_product, selected_precursor);
                                			}, 
							items:10});
						}else{
						    console.log("orphan_product is null for i " + i);    
						}
                        		}
				});
			}	
               }
		);

	/*$('#example tr').click(function() {
		var href = $(this).find("a").attr("href");
		if(href) {
			alert(href);
			return false;
			window.location = href;
		}
	});*/


	$('#chr_grp_association_table tr').click(function(e) {
		//alert(" removing ");
		//e.preventDefault(); // don't follow the link
		$(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
	}); 
	
	$('a.redc').click(function(e) {
		e.preventDefault(); // don't follow the link
  		$(this).closest('tr').remove(); // credits goes to MrKurt for use of closest()
	});

	
       }); //end of .ready

	function dblclickExperiment(){
                        //document.getElementById("cdf_highchart").style.display = "none";
                        //if (selectedData == undefined)
                        //      return;
                        $('#exp_metabo_tbl tbody tr').unbind('dblclick').bind('dblclick', function () {
                        	var selectedData = oTable.fnGetData( this );
                        	//var iId = selectedData[7];
				updateExperiment(selectedData[7]);
                		//new Messi('Add details/comparator ' + iId + ' to container coming soon', {title: 'ToDo', autoclose:2000});
  
		        /*$('#experimentselected').html("Experiment:"+selectedData[3]);
                        document.getElementById("cdf_chartdiv").style.display = "block";
                        $("#cdf_dialog").html("<img src='images/demo_wait.gif' />");
                        processChromatogramSpectrum(iId);*/
                        return;
                        });
                }

                function dblclickChromatogram(){
                         $('#cdf_spectrum_tbl tbody tr').unbind('dblclick').bind('dblclick', function () {
                        var selectedData = chromatogramTable.fnGetData( this );
                        var cId = selectedData[0];
                        $('#chromatogramselected').html("Chromatogram:"+selectedData[2]);
                        document.getElementById("spectral_chartdiv").style.display = "block";
                        processSpectrum("cdf_rirt_tbl", cId);
                        return;
                        });
                }

		 function processChromatogramSpectrum(eid){
                        //document.getElementById("cdf_highchart").style.display = "none";
                        if (chromatogramTable != undefined)
                                chromatogramTable.fnClearTable();
                        //important to set type to GET for passing variables within URL
                        $.ajax({
                                type: "GET",
                                url:  "/cgi-bin/metabobase/get_chromatogram.cgi?eid=" + eid,
                                success: function(json)
                                {
                                        $("#cdf_dialog").hide();
                                        var jo  = $.parseJSON(json);
                                        chromatogramTable = $('#cdf_spectrum_tbl').dataTable( {
                                        "bProcessing": true,
                                        "bDestroy": true,
                                        "aaData": jo.aaData,
                                        fnDrawCallback: function() {
                                               dblclickChromatogram();
                                        }
                                        } );
                                },
                                error:function(xhr,err)
                                {
                                        alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
                                }
                        });
                }

		function processSpectrum(specdiv, cid){
                        $("#spec_dialog").html("<img src='images/demo_wait.gif' />");
                        //document.getElementById("cdf_highchart").style.display = "none";
                        if (spectrumTable != undefined)
                                spectrumTable.fnClearTable();
                        $.ajax({
                                type: "GET",
                                url:  "/cgi-bin/metabobase/get_spectrum.cgi?cid=" + cid,
                                success: function(json)
                                {
                                        $("#spec_dialog").hide();
                                        var jo  = $.parseJSON(json);
                                        spectrumTable = $('#'+specdiv).dataTable( {
                                        "bProcessing": true,
                                        "bDestroy": true,
                                        "aaData": jo.aaData,
                                        "iDisplayLength": 25,
                                        fnDrawCallback: function() {
                                                //alert("todo - spectral event");
                                        }
                                        } );
                                },
                                error:function(xhr,err)
                                {
                                        alert("Failed\nreadyState: "+xhr.readyState+"\nstatus: "+xhr.status + "\nresponseText: "+xhr.responseText);
                                }
                        });
                }

	$('.inside').hover(
	function () {
    $(this).animate({
        height: '200px',
        width: '200px'
    }, 200);
},

	function () {
    $(this).animate({
        height: '150px',
        width: '150px'
    }, 200);
	});

function refresh_libdb(){
	new Messi('Are you sure you want to refresh the LibDB?', {title: 'LibDB', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}],
                callback: function(val) { 
			if (val == 'Y'){
                        $("#header_form_msg").html("<img src='images/wait.gif' />");
			$.ajax({
                        type: "POST",
                        url:  "/cgi-bin/metabobase/gencmnplibs.cgi",
                        success: function(json)
                        {
         			var jo  = $.parseJSON(json);
				var status = jo["status"];                
				$("#header_form_msg").html("");
				if (status == "200"){
                                	new Messi('Libray databases refreshed successful', {title: 'Done', autoclose: 2500});
                                }
				if (status == "500"){
                                        new Messi('Error on libray databases refresh, check with Daniel', {title: 'Error'});
                                }
			},
                        error:function(xhr,err)
                        {
				$("#header_form_msg").html("");
				new Messi('Error on libray databases refresh, check with Daniel', {title: 'Error'});

                        }
                        });
                }}});	
}

	</SCRIPT>
</HEAD>
<BODY>

<DIV id="optional-container">
	<DIV class="ui-layout-north" id="northheader">
	<img src="images/unilulogo.jpg" width=40 height=40> &nbsp; &nbsp;</img>
	<img src="images/lcsblogo.jpg" width=40 height=40> &nbsp; &nbsp; <b></b></img>
	<b>MetaboBase@Metabolomics Group:Luxembourg Centre for Systems Biomedicine</b> <span class="mheadlinks"><span id="header_form_msg"></span><a href="mailto:daniel.weindl@uni.lu">Contact</a>&nbsp; <a href="atom_transition/index.html" target="_blank">Atom Transition</a>&nbsp; <a href="https://code.google.com/p/metabobase/issues/list" target="_blank">Issues[old]</a>&nbsp; <a href="http://metabolomics.uni.lux/bugzilla/enter_bug.cgi?product=Metabobase" target="_blank">Issues</a><a href="http://metabolomics.uni.lux/~dweindl/mddb/stats.php">&nbsp; Stats</a>
&nbsp; <a href="http://metabolomics.uni.lux/~dweindl/mddb/data.php">Data Files</a>
&nbsp; <a href="javascript:refresh_libdb(null)">Update MD CompLibs</a>
</span>
	</DIV>
	<DIV id="tabs_div" class="ui-layout-center">
		<UL style="-moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0;">
			<LI><A href="#compound_library_tab"><SPAN TITLE="View and update library compounds details and associations, along with spectra">Compounds</SPAN></A></LI>
			<LI><A href="#experiment_chromatography_tab"><SPAN>Experiment-Chromatograms</SPAN></A></LI>
			<LI><A href="#product_precursor_tab"><SPAN>Product-Precursor</SPAN></A></LI>
		</UL>
	<!--	<ul onmouseover="myLayout.allowOverflow(this)" onmouseout="myLayout.resetOverflow('center')"> -->
		<DIV class="ui-layout-content ui-widget-content ui-corner-bottom" style="border-top: 0; padding-bottom: 1em;">
	
	 <DIV id="product_precursor_tab">
		<div>
		<!--	<input style="display:inline" size="20" id="ppc_reagent" data-provide="typeahead" value="MSTFA"> -->
			<!-- should be dynamic later -->
			Derivatization Group: <select id = "ppc_reagent" name="ppc_reagent" style="display:inline">
                                <option value = "MSTFA">MSTFA</option>
                                <option value = "MOX">MOX</option>
                                <option value = "Methanol">Methanol</option>
				<option value = "TBDMS">TBDMS</option>
                        </select>
			&nbsp;&nbsp;Lookup:&nbsp;<input style="display:inline" size="20" id="ppc_lookup" name="ppc_lookup" value="TMS"> <input style="display:inline" type="button" value = "Search" onclick="refreshProductPrecursor();"/>
		</div>	
		<br>		
		<span id="pp_msg"><font color="blue"><a href="#" onclick="refreshProductPrecursor();"><font color="blue">Refresh</font></a></font></span>
		<br>
		<div id="product_precursor_tbl_div"></div>
                <table>
		<tr>
                        <th width="25%">Product</th>
                        <th width="10%">Copies</th>
			<th width="25%">Precursor</th>
                        <th width="30%">Product Formula</th>
                        <th width="10%">Status</th>
                </tr>
		</table>
		<span id="pp_msg1"><a href="#" onclick="refreshProductPrecursor();"><font color="blue">Refresh</font></a></span>
	</DIV>

	<DIV id="experiment_chromatography_tab">
	  <div id="container">
	    <input type="search" style="display:inline" size="30" name="home_search_chromatogram" id="home_search_chromatogram" TITLE="Search and download chromatograms, a minimum of 2 characters"  placeholder="Find chromatograms">&nbsp;<input type="checkbox" id="home_onlyunassigned" name="home_onlyunassigned" value="unassigned" checked> Only unassigned
                        &nbsp;<button id="homesearchChrom" value="Search" onClick="home_search_chromatogram()">Search</button>
			<span id="experiment_func"><a href="#" onclick="addExperiment();"><font size="-1" color="blue">Add Experiment/Groups</font></a>&nbsp;</span><br>
			<span id="hscmsg"></span>
			<div id="home_search_chromatogram_results" class="a"></div>
                        <div id="dynamic">
                                <table cellpadding="0" cellspacing="0" border="0" class="display" id="exp_metabo_tbl">
                        <thead>
                        <tr>
			<th width="5%"></th>
                        <th width="25%">Title</th>
                        <th width="15%">Organism</th>
                        <th width="15%">SampleType</th>
                        <th width="10%">CDFFiles</th>
			<th width="10%">Date</th>
			<th width="15%">Experimenter</th>
			<th width="5%">Id</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
			<th width="5%"></th>
                        <th width="25%">Title</th>
                        <th width="15%">Organism</th>
                        <th width="15%">SampleType</th>
                        <th width="10%">CDFFiles</th>
                        <th width="10%">Date</th>
                        <th width="15%">Experimenter</th>
                        <th width="5%">Id</th>
                </tr>
                </tfoot>
        </table>
	<div id="cdf_dialog"></div>
	<br><br>
	<div id="experiments_tagged"><b>Pinned Experiments</b>&nbsp;<a href="#" onclick="clearTaggedExperiments();"><font color="red">Clear</font></a>
	<table cellpadding="0" cellspacing="0" border="0" class="display" width="800" id="exp_tagged_tbl">
	</table>
        </div>

	<div id="cdf_chartdiv" style="display: none"><h1>Chromatogram</h1><span id="experimentselected">Experiment Description ...</span>
        	<table cellpadding="0" cellspacing="0" border="0" class="display" id="cdf_spectrum_tbl">
                        <thead>
                        <tr>
                        <th width="5%">Id</th>
                        <th width="15%">Date</th>
                        <th width="20%">File</th>
                        <th width="10%">Operator</th>
                        <th width="15%">Method</th>
                        <th width="35%">Intensity</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
                        <th width="5%">Id</th>
                        <th width="15%">Date</th>
                        <th width="20%">File</th>
                        <th width="10%">Operator</th>
                        <th width="15%">Method</th>
                        <th width="35%">Intensity</th>
                </tr>
                </tfoot>
                </table>
	</div>
<div id="spec_dialog"></div>
<div id="spectral_chartdiv" style="display: none"><h1>Spectrums</h1><span id="chromatogramselected">Experiment Description ...</span>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="cdf_rirt_tbl">
                        <thead>
                        <tr>
                        <th width="10%">Id</th>
                        <th width="20%">RI</th>
                        <th width="20%">RT</th>
                        <th width="50%">Spectral Peaks</th>
                </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
                <th width="10%">Id</th>
                <th width="20%">RI</th>
                <th width="20%">RT</th>
                <th width="50%">Spectral Peaks</th></tr>
                </tfoot>
                </table>
        </div> 
</div>
<div class="spacer"></div>
</div>
	</DIV>

	<DIV id="compound_library_tab">
		<div>
			<input type="search" style="display:block" size="30" name="search_input" id="search_input" TITLE="Search function provides typeahead with built in partial match on compound name and synonyms. For quick lookups enter compound_id. Find compounds with mz and relative intensity like this: 'mz=234 [[and/or] ri>=.05]' the operators =, <, > are all supported. ri defaults to ' and ri=.05' ie mz=234 ri>.1 is an implicit and condition, OR needs to be mz=234 or ri>.1 Find compounds and spectrums with valid comment by entering compound:comment[:X] or spectrum:comment[:X] the X is optional and can be any value"  placeholder="Compound name" data-provide="typeahead">
			&nbsp;<button id="searchCompound" value="Search" onClick="search_library_compound()">Search</button>			
			<a href=javascript:show_compound_form(null)><font size="-2">Add Compound</font></a></div>			
		<div id="cl_msg" ></div>
	<div id="compound_container">
		<div id="compound_library_dialog"></div>
        	<div id="compound_dynamic">
                                <table cellpadding="0" cellspacing="0" border="0" class="display" id="compound_metabo_tbl">
                        <thead>
                        <tr>
                	 <th width="1%">CompoundId</th>
                        <th width="28%">Name</th>
			<th width="1%">LastMod</th>
			<th width="5%"></th>
			<th width="18%">Formula</th>
			<th width="14%">NominalMass</th>
                        <th width="14%">MonoisotopicMass</th>
                        <th width="14%">MolecularWeight</th>
			</tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
                <tr>
			<th width="1%">CompoundId</th>
			<th width="1%">LastMod</th>
                        <th width="28%">Name</th>
			<th width="5%"></th>
                        <th width="18%">Formula</th>
                        <th width="14%">NominalMass</th>
			<th width="14%">MonoisotopicMass</th>
			<th width="14%">MolecularWeight</th>
		</tr>
                </tfoot>
        	</table>
		</div>
	</div>
	</DIV> <!-- end of compound_library_tab -->
		</DIV>
	</DIV>

	<DIV class="ui-layout-west"> 
		<div id="chart_div"></div>
		<div id="chart_table_div" class="a"></div>
		<div id="precursor_details_view"></div>
	</DIV>
	<DIV class="ui-layout-east">
		<span id="compound_form_msg"></span>
		<div id="spectrum_form">
			<label for="chromatogram_id">Data file:</label>
                        <input size="75" name="chromatogram_id" id="chromatogram_id"  placeholder="Type data file..." data-provide="typeahead">

			<label for="sp_ri">RI:</label>
                	<input style="display:block" size="50" name="sp_ri" id="sp_ri" type="text">
			<!-- <span><fieldset> -->
			    <!-- <legend>RT:</legend> -->
			<label for="sp_rtmin">RT min:</label>
    			<input style="display:block" name="sp_rtmin" size="50" id="sp_rtmin" type="text">
    			<label for="sp_rtsec">RT sec:</label><input style="display:block" size="50" name="sp_rtsec" id="sp_rtsec" type="text">
    			<label for="sp_rtmils">RT mils:</label><input style="display:block" size="50" name="sp_rtmils" id="sp_rtmils" type="text">
  			<!-- </fieldset> -->
			<!-- </span>-->
			<label for="sp_resolution">Resolution:</label>
			<input style="display:block" size="50" value="1" name="sp_resolution" id="sp_resolution" type="text">
			<label>Origin:</label>
		        <select id = "spectrum_origin_id" name="spectrum_origin_id" style="display:block">
	               	<!--	<option value = "1">LCSB</option>
        	       		<option value = "2">TUBS</option>
               			<option value = "3">NIST</option>
             		-->
			</select>
			<!-- spectrum user comments -->
			<label for="spectral_comments"><a href="#" class="atooltip" data-tip="User comments">Comments</a></label>
                        <textarea style="display:block" rows="3" cols="50" place_holder="User comments" name="spectral_comments" id="spectral_comments" ></textarea>
			<label for="spectral_peaks"><a href="#" class="atooltip" data-tip="Spectral peaks include mz and intensity, and need to be one pair per row">Spectral peaks</a></label>
                	<textarea style="display:block" rows="10" cols="50" place_holder="mz intensity pairs" name="spectral_peaks" id="spectral_peaks" ></textarea>
			<button id="newSpectrumButton" onClick="associate_compound_spectrum(null)">Add</button>                
			<button id="hideSpectrumButton" onClick="hide_spectrum(null)">Cancel</button>			
		</div>
		<div id="spectrum_annotation_form" style="display: none">
			<span class="table_header_style"><a href="#" class="atooltip" data-tip="Double click on row for mz/intensity  plot and table, mouse over Comment/Chrom for details">Mass spectra</a></span>
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="compound_spectral_tbl">
                        	<thead>
                        	<tr>
                        		<th width="10%">Id</th>
                        		<th width="15%">RI</th>
                        		<th width="15%">Origin</th>
                        		<th width="15%">Date</th>
					<th width="40%"></th>
                		</tr>
        			</thead>
        			<tbody>
        			</tbody>
			</table>
			<br>
			<span class="table_header_style">Spectrum annotation</span>
			<table cellpadding="0" cellspacing="0" border="0" class="display" id="spectrum_annotation_tbl">
                                <thead>
                                <tr>
                                        <th width="10%">m/z</th>
                                        <th width="15%">Formula</th>
                                        <th width="10%">MMI</th>
					<th width="20%">Precursor Atoms Retained</th>
					<th width="10%">Confirmed</th>
					<th width="15%">Comment</th>
					<th width="10%"></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                        </table>
			<label for="spa_formula"><a href="#" class="atooltip" data-tip="Spectral Formula">Formula</a><span id="spa_formula_span"></span></label>
                        <input style="display:block" size="50" id="spa_formula" onChange="updateSpectrumFormula()" onFocus="load_structure()">
			<label for="spa_peak_mz"><a href="#" class="atooltip" data-tip="Spectral peak">m/z</a></label>
                        <input style="display:block" size="50" id="spa_peak_mz" onChange="updateSpectrumMZ()">
			<label for="spa_isotope_max_mass"><a href="#" class="atooltip" data-tip="Max isotope max for labeling">Max mass isotopomer</a></label>
                        <input style="display:block" size="50" id="spa_isotope_max_mass">
			<label for="spa_confirm"><a href="#" class="atooltip" data-tip="Confirmed by labeling for high confidence">Confirmed by labeling</a></label>
                        <input name="spa_confirm" value="false" type="checkbox" id="spa_confirm">
			<div id="spa_pstructure"></div>
			<div id="spa_structure_container" style="display:none;"></div>
			
			<label for="spa_precursor_atoms_retained"><a href="#" class="atooltip" data-tip="precursor_atoms_retained">Precursor atoms retained</a></label>
                        <input style="display:block" size="75" id="spa_precursor_atoms_retained" value="">

			<label for="spa_inchi"><a href="#" class="atooltip" data-tip="Inchi text">Inchi</a></label>
                        <textarea style="display:block" rows="2" cols="50" place_holder="inchi text" id="spa_inchi" ></textarea>
			<label for="spa_comment"><a href="#" class="atooltip" data-tip="Readable molecule fragment comments">Comment</a></label>
                        <textarea style="display:block" rows="2" cols="50" place_holder="e.h. [M-TMS]+ or [M-CO2-CH3]+" id="spa_comment" ></textarea>
			<button id="newSpaButton" onClick="associate_spectrum_annotation(null)">Add</button>
			<button id="resetSpaButton" onClick="reset_spectrum_annotation_form()">Reset</button>
                        <button id="hideSpaButton" onClick="hide_spectrum_annotation(null)">Cancel</button>
                </div>

		<div id="compound_form">
		<input type="hidden" name="compound_id" id="compound_id" >
		<input type="hidden" id="precursor_id" value="">
		<input type="hidden" id="synonym_changed" value="">
		<label for="compound_name"><a href="#" class="atooltip" data-tip="Compound name is required">Name</a></label>
                <input style="display:block" size="50" name="compound_name" id="compound_name" >
		<span id="structure_span">
		<!--<p><a href="http://metabolomics.uni.lux/~dweindl/mddb/struc_svg.php?cid=25643" target="_blank">
		<img border="0" src="http://metabolomics.uni.lux/~dweindl/mddb/struc_svg.php?cid=25643" width="50%" height="20"></a>
		</p>-->
		</span>
	
		<label for="compound_synonym"><a href="#" class="atooltip" data-tip="One synonym entry per row">Synonyms</a></label>
                <textarea style="display:block" rows="1" cols="30" name="compound_synonym" id="compound_synonym" ></textarea>
		<span class="table_header_style">Precursors</span>
                        <table cellpadding="0" cellspacing="0" border="0" class="display" id="compound_precursor_tbl">
                                <thead>
                                <tr>
                                        <th width="25%">Precursor</th>
                                        <th width="30%">Derivatization reagent</th>
                                        <th width="10%"></th>
					<th width="10%"></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                        </table>
                <br>
		<label for="compound_precursor"><a href="#" class="atooltip" data-tip="Optional, but precursor compound must be valid, use lookup service">Precursor name</a>&nbsp;<span id="precursor_details"></span></label>
                <input style="display:block" size="50" name="compound_precursor" id="compound_precursor" placeholder="Type compound..." data-provide="typeahead">
		<label for="derivation_reagent"><a href="#" class="atooltip" data-tip="Required for Precursor Compound">Derivatization reagent</a></label>
                <select id = "derivation_reagent" name="derivation_agent" style="display:inline"><option value = "na"></option></select>&nbsp;<span id="precursor_action"style="display:inline"><button type="button" onclick="javascript:save_precursor()">Associate</button></span>		
		<input type="hidden" id="precursor_mode" value="insert" >
		<br>
		<div id="derivation_groups" style="display:none"></div>
		
                <label for="sum_formula"><a href="#" class="atooltip" data-tip="Formula is required for calculation of mass and weight">Formula</a></label>
                <input style="display:block;height:30px;width:400px;" size="100" name="sum_formula" id="sum_formula" onChange="updateFormula()">
                <label for="nominal_mass">Nominal mass:</label>
                <input style="display:block" size="50" name="nominal_mass" id="nominal_mass" >
		<label for="molecular_weight">Molecular weight:</label>
                <input style="display:block" size="50" name="molecular_weight" id="molecular_weight" >
                <label for="monoisotopic_mass">Monoisotopic mass:</label>                
		<input style="display:block" size="50" name="monoisotopic_mass" id="monoisotopic_mass" >
		<label for="reference_spectrum_id"><a href="#" class="atooltip" data-tip="Spectrum id must exist or use the create new">Spectrum id:</a>&nbsp;<a href=javascript:show_spectrum_form(null)><font size='-2'>New</font></a></label>
                <input style="display:block" size="50" name="reference_spectrum_id" id="reference_spectrum_id" >
		<label for="ref_cas_id"><a href="http://www.cas.org" target="_blank">CAS</a> id:</label>
                <input style="display:block" size="50" name="ref_cas_id" id="ref_cas_id" >
		<label for="ref_pubchem_id"><span id="pubchem_deeplink"><a href="http://pubchem.ncbi.nlm.nih.gov/" target="_blank">Pubchem</a></span> id:</label>
                <input style="display:block" size="50" name="ref_pubchem_id" id="ref_pubchem_id" >
		<label for="ref_hmdb_id"><span id="hmdb_deeplink"><a href="http://www.hmdb.ca" target="_blank">HMDB</a></span> id:</label>
                <input style="display:block" size="50" name="ref_hmdb_id" id="ref_hmdb_id" >
		<label for="ref_nist_id"><a href="http://webbook.nist.gov/chemistry" target="_blank">NIST</a> id:</label>
                <input style="display:block" size="50" name="ref_nist_id" id="ref_nist_id" >
		<label for="ref_chemspider_id"><span id="chemspider_deeplink">Chemspider id</span></label>
                <input style="display:block" size="50" name="ref_chemspider_id" id="ref_chemspider_id" >
		<label for="ref_cas_id"><span id="kegg_deeplink"><a href="http://www.genome.jp/kegg/ligand.html" target="_blank">KEGG id</a></span></label>
                <input style="display:block" size="50" name="ref_kegg_id" id="ref_kegg_id" >

		<label for="inchi">Inchi:</label>
                <input style="display:block" size="50" name="inchi" id="inchi" >
		<label for="inchi_key">Inchi key:</label>
		<textarea style="display:block" rows="2" cols="50" name="inchi_key" id="inchi_key" ></textarea>
		<label for="lcchecked">Checked:</label>
                <input type="checkbox" style="display:block" name="lcchecked" id="lcchecked" >
                <label for="comments">Comments:</label>
                <textarea style="display:block" rows="2" cols="50" name="lccomment" id="lccomment" ></textarea>
              
                <button id="newCompoundButton" onClick="post_library_compound(null)">Submit</button>
		<button id="hideCompoundButton" onClick="hide_compound_details(null)">Cancel</button>
		<button id="newCompoundButton" onClick="delete_library_compound(null)">Delete</button>
        	</div>
  <!--              <div id="form_div"></div> -->
		<div id="exp_grps_form"><font color="cornflowerblue"><span id="experiment_form_message">Add New Experiment</span></font>&nbsp;
			<br>
			<div id="exp_add_form">
                	<span style="width:250px">
			<label for="exp_title">Title:</label>
			<input style="display:inline;width:420px;" name="exp_title" id="exp_title" >
			</span><span style="width:250px"><br>
			<label for="exp_title" >Experimenter:</label>
			<select id = "exp_people" name="exp_people" style="display:inline;width:420px;"></select>
			</span><span style="width:250px"><br>
			<label for="exp_date" >Date (dd/mm/yyyy):</label>
			<input type="text" style="display:inline;height:28px;width:420px;" name="exp_date" id="exp_date" >
			</span><span style="width:250px"><br>
			<label for="exp_title">Project:</label>
			<select id = "exp_project" name="exp_project" style="display:inline;width:250px;"></select><a href="#" onclick="addExpProject();"><font color="blue">&nbsp;Add New&nbsp;</font></a> 
                        <input style="display:none;width:150px" name="new_exp_project" id="new_exp_project" onchange="saveExpProject();">
			</span>
			<label for="exp_short_description">Keywords:</label>
			<textarea style="display:inline;width:420px;" rows="1" cols="500"  name="exp_keywords" id="exp_keywords"></textarea>
			<label for="exp_description">Description:</label>
			<textarea style="display:inline;width:420px;" rows="2" cols="500"  name="exp_description" id="exp_description" ></textarea>	
			<br><button id="newExperimentButton" onClick="postNewExperiment()">Save Experiment</button>
			<span id="experiment_archive"></span>	
			</div>
			<br><span id="experiment_group_message"><font color="cornflowerblue">Defining Groups&nbsp;</font><span id="isocheck"><input id="tracer_groups" value="tracer" type="checkbox">&nbsp;Isotopic Tracer&nbsp;</span><span id="experiment_group_status"></span></span>
			<br><a href="#" onclick="addMoreGroups(3);"><font color="blue">&nbsp;+more</font></a> <a href="#" title="BioSample and OrgStrain from 1st group will be applied to all groups"  onclick="set2AllGroups();"><font color="blue">&nbsp;set to all</font></a></font><span id="annotate_tracer"></span><br>
			<div id="define_groups_form">
			</div>
			<br>
			<div><button id="newGroupButton" disabled onClick="postExperimentGroups()">Save Groups</button></div>
			<div id="isotopic_tracer_form"></div>
			<br>
			<font color="cornflowerblue">Chromatogram:Group Associations</font>&nbsp;
			<div id="chromatogram_group_form"><br>
			<label style="display:inline" for="search_chromatograms">Search:</label>			
                        <input style="display:inline;width:200px;" id="search_chromatograms">
			<input type="checkbox" id="onlyunassigned" name="onlyunassigned" value="unassigned" checked> Only unassigned
			<div id="scdf_dialog"></div> 
			<button id="searchChromatogramButton" onClick="searchChromatograms()">Go</button><br><br>
			<div id="chr_search_results" class="a">
			</div>
			<br><br>
			<div id="chr_grp_association_form">
				<div id="chr_grp_association_div">
					<span id="chr_grp_function"></span>				
					<table id="chr_grp_association_table"></table>
					<div id="chr_grp_association_existing"></div>
			</div></div>
			<br><button id="chromGroupButton" disabled onClick="postChromGroups()">Associate Sample Groups</button>
			</div>
		</div>
        </DIV>
	<!--	<DIV class="ui-layout-south"> South </DIV>	-->


</DIV>
</DIV>
</BODY>
</HTML>
